<template>
  <!-- 吨位统计柱状图 -->
  <div class="tonnageCountBox" ref="tonnageEchart"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
// 吨位接口
import { getAnnualShipNavigateTonsTotal } from "../utils/apis";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
]);

export default {
  data() {
    return {
      xTonsData: [],
      yTonsData: [],
    };
  },
  created() {
    // 全年通航船舶吨位统计
    this.getShipTonsTotalFn();
  },
  methods: {
    getShipTonsTotalFn() {
      getAnnualShipNavigateTonsTotal().then((res) => {
        console.log(res.data[0]);
        for (const key in res.data[0]) {
          this.xTonsData.push(key);
          this.yTonsData.push(res.data[0][key]);
        }
        this.$nextTick(() => {
          this.changeEchart();
        });
      });
    },
    changeEchart() {
      var option = {
        title: {
          text: "全年通航船舶吨位统计",
          left: "center",
          top: "16px",
          textStyle: {
            fontSize: 16,
            color: "rgba(0,0,0,0.9)",
            fontWeight: "500",
          },
        },
        grid: {
          top: "50px",
          left: "35px",
          right: "30px",
          bottom: "30px",
          backgroundColor: "#fff",
          width: "auto", //图例宽度
          height: "auto", //图例高度
        },
        color: ["#3177EC"],
        tooltip: {},
        grid: {},
        xAxis: [
          {
            type: "category",
            // data: [
            //   '0-500',
            //   '500-1000',
            //   '1000-1500',
            //   '1500-3000',
            //   '3000-5000',
            //   '5000-10000',
            //   '10000-30000'
            // ],
            data: this.xTonsData,
            inverse: true,
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: { interval: 0, rotate: 30 },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位/艘次",
            nameTextStyle: {
              color: "#000", //坐标轴名称的颜色
              fontWeight: "400", //字体粗细
            },
          },
          {
            name: "吨",
            nameLocation: "start",
            nameTextStyle: {
              color: "#000", //坐标轴名称的颜色
              fontWeight: "400", //字体粗细
            },
          },
        ],
        series: [
          {
            name: "船舶吨位",
            type: "bar",
            barWidth: "30%",
            // data: [10, 52, 200, 334, 390, 330, 220]
            data: this.yTonsData,
          },
        ],
      };
      var tonnageChartDom = this.$refs.tonnageEchart;
      var myChart = echarts.init(tonnageChartDom);
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.tonnageCountBox {
  height: 400px;
  /* height: 100%; */
  width: 375px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 10px;
}
</style>
